<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="robots" content="all" />
		<meta name="generator" content="Dynamics" />
		<meta name="author" content="Fabian Tollenaar/dotBrilliance (c) 2009" />
		
		<title>Grooveshark style menu</title>
		
		<script type="text/javascript" src="assets/scripts/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="assets/scripts/jquery.grooveshark.js"></script>
		
		<style type="text/css">
			@import url(assets/styles/layout.css) screen;
			@import url(assets/styles/grooveshark.css) screen;
		</style>
		
		<script type="text/javascript">
			$(document).ready(function() {
				$('#container').grooveshark();
				
				$('#backhome').click(function() {
					$('#container').backhome();
				});
			});
		</script>
	</head>
	
	<body>
		<a href="javascript:void(0)" id="backhome">back to home</a>
		
		<div id="container">
			<div class="ui-gs-main">
				<ul>
					<li rel="home">Home</li>
					<li rel="over_ons">Over ons</li>
					<li rel="portfolio">Portfolio</li>
					<li rel="contact">contact</li>
				</ul>
			</div>
			
			<div class="ui-gs-panel home">
				<ul>
					<li>home sub 1</li>
					<li>home sub 2</li>
					<li>home sub 3</li>
					<li>home sub 4</li>
					<li>home sub 5</li>
					<li>home sub 6</li>
					<li>home sub 7</li>
					<li>home sub 8</li>
					<li>home sub 9</li>
					<li>home sub 10</li>
					<li>home sub 11</li>
					<li>home sub 12</li>
				</ul>
			</div>
			
			<div class="ui-gs-panel over_ons">
				<ul>
					<li>over ons sub 1</li>
					<li>over ons sub 2</li>
					<li>over ons sub 3</li>
					<li>over ons sub 4</li>
					<li>over ons sub 5</li>
					<li>over ons sub 6</li>
					<li>over ons sub 7</li>
					<li>over ons sub 8</li>
					<li>over ons sub 9</li>
					<li>over ons sub 10</li>
					<li>over ons sub 11</li>
					<li>over ons sub 12</li>
				</ul>
			</div>
			
			<div class="ui-gs-panel portfolio">
				<ul>
					<li>portfolio sub 1</li>
					<li>portfolio sub 2</li>
					<li>portfolio sub 3</li>
					<li>portfolio sub 4</li>
					<li>portfolio sub 5</li>
					<li>portfolio sub 6</li>
					<li>portfolio sub 7</li>
					<li>portfolio sub 8</li>
					<li>portfolio sub 9</li>
					<li>portfolio sub 10</li>
					<li>portfolio sub 11</li>
					<li>portfolio sub 12</li>
				</ul>
			</div>
			
			<div class="ui-gs-panel contact">
				<ul>
					<li>contact sub 1</li>
					<li>contact sub 2</li>
					<li>contact sub 3</li>
					<li>contact sub 4</li>
					<li>contact sub 5</li>
					<li>contact sub 6</li>
					<li>contact sub 7</li>
					<li>contact sub 8</li>
					<li>contact sub 9</li>
					<li>contact sub 10</li>
					<li>contact sub 11</li>
					<li>contact sub 12</li>
				</ul>
			</div>
		</div>
	</body>
</html>
